<template>
    <v-card-text class="text-center" v-if="time !== null">
        <div v-if="time.Status === 'on'">
            <div>{{$t('timer.til_round_end',{round: time.NowRound})}}</div>
            <p class="display-1 text--primary">
                {{minute}} {{$t('general.minute')}} {{second}} {{$t('general.second')}}
            </p>
        </div>
        <div v-else-if="time.Status === 'wait'">
            <p class="display-1 text--primary">
                {{$t('timer.not_begin')}}
            </p>
        </div>
        <div v-else-if="time.Status === 'pause'">
            <p class="display-1 text--primary">
                {{$t('timer.pause')}}
            </p>
        </div>
        <div v-else-if="time.Status === 'end'">
            <p class="display-1 text--primary">
                {{$t('timer.end')}}
            </p>
        </div>
    </v-card-text>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import api from '@/utils/api.js'

let timer = null
let requestTimer = null

const time = reactive({})
const minute = ref(0)
const second = ref(0)

onMounted(() => {
            getTime()
            requestTimer = setInterval(getTime, 10000)
            timer = setInterval(timeTick, 1000)
        })

onUnmounted(() => {
            clearInterval(requestTimer)
            clearInterval(timer)
        })

function getTime() {
                api.GET("/time").then(res => {
                    time.value = res
                    timeTick()
                })
            }

            // 时间倒数
function timeTick() {
                time.value.RoundRemainTime--
                minute.value = Math.floor(time.RoundRemainTime / 60)
                second.value = time.value.RoundRemainTime - minute.value * 60
                if (time.RoundRemainTime <= 0) {
                    time.RoundRemainTime = time.Duration * 60
                    time.NowRound++
                }
            }
</script>

<style scoped>

</style>